<template>
	<view class="h-100v flex flex-column bg-white">
		<view class="flex justify-around tabTitle p-24">
			<text :class="{active:current==0}" @click="current=0">支出</text>
			<text :class="{active:current==1}" @click="current=1">收入</text>
		</view>
		<!-- 收支类型 -->
		<swiper class="swiper flex-auto p-24r" :current="current" @change="handleTabChange">
			<swiper-item style="overflow: scroll;">
				<view class="swiper-item" >
					<!-- 类型 -->
					<scroll-view  scroll-y="true">
						<view>
							<view class="flex flex-wrap items-center">
								<view v-for="item in typeStore.payType" :key="item.title" class="flex flex-column items-center basis-1/4 mb-20" @click="open(item)" @longpress="longpress(item)">
									<text class="iconfont acc-type mb-10r" :class="[item.icon, {'active-type':activeType==item.id}]"></text>
									{{item.title}}
								</view>
								<view class="flex flex-column items-center basis-1/4 mb-20" @click="setType(0)">
									<text class="iconfont acc-type plus mb-10r icon-plus"></text>
									添加
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</swiper-item>
			<swiper-item style="overflow: scroll;">
				 <view class="swiper-item">
					<scroll-view  scroll-y="true">
						<view>
							<view class="flex flex-wrap items-center">
								<view v-for="item in typeStore.inType" :key="item.title" class="flex flex-column items-center basis-1/4 mb-20" @click="open(item)"  @longpress="longpress(item)">
									<text class="iconfont acc-type mb-10r" :class="[item.icon, {'active-type':activeType==item.id}]"></text>
									{{item.title}}
								</view>
								<view class="flex flex-column items-center basis-1/4 mb-20" @click="setType(1)">
									<text class="iconfont acc-type plus mb-10r icon-plus"></text>
									添加
								</view>
							</view>
						 </view>
					</scroll-view>
				 </view>
			</swiper-item>
		</swiper>
		
		<!-- 添加账单记录 -->
		<setAccount :visible="showPopup" :type-obj="typeItem" @close="showPopup=false"></setAccount>
		<!-- 编辑分类 -->
		<uni-popup ref="typePopup" type="bottom" background-color="#fff">
			<view class="flex flex-column p-24 pb-50">
				<text class="text-center mb-30">{{popTitle}}</text>
				<input style="background-color: #eee;" class="p-12" v-model="customTitle" type="text" placeholder="不能与已有分类名称重复" maxlength="4" focus confirm-type="done" @input="onCustomTypeInput" @confirm="handleSetType"/>
				<text class="text-12 pt-6 pb-24" :style="{color:cusFlag?'orangered':'transparent'}">名称与已有类型重复, 请重新输入类型名称</text>
			</view>
		</uni-popup>
		<!-- 分类操作 -->
		<uni-popup ref="typeOperation" type="bottom" background-color="#fff">
			<view class="flex flex-column">
				<text class="text-center py-24" style="color: orangered; border-bottom: 1px solid #eee;" @click="handleDeleteType">删除</text>
				<text class="text-center py-24" @click="handleEditType">修改</text>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {ref} from 'vue'
	import DaDatetimePicker from '@/components/da-datetime-picker/index.vue';
	import setAccount from '@/components/setAccount/setAccount.vue'
	import {getTypeList,addCustomType,updateCustomType,deleteCustomType} from '@/api/api.js';
	import {formatMoney} from '@/common/format.js';
	import { useTypeStore } from '@/store/type';
	export default {
		components: { DaDatetimePicker},
		data() {
			return {
				current: 0,
				activeType:'',
				// payType:[],
				// incomeType:[],
				// 自定义类型
				customId:'',
				customTitle:'',
				customType:0,
				cusFlag:false,
				isUpdate:false,
				// setAccounts 属性
				typeItem:{},
				showPopup:false,
			};
		},
		computed:{
			popTitle() {
				return this.isUpdate?'修改分类':'添加分类'
			},
		},
		// async onLoad() {
		// 	await this.getData()
		// },
		setup() {
			const typeStore = useTypeStore()
			return {typeStore}
		},
		
		methods:{
			open(item){
				this.activeType = item.id
				this.showPopup = true
				this.typeItem = item
			},
			// 切换tab
			handleTabChange(event) {
				this.current = event.detail.current
			},
			// async getData() {
			//    const list = (await getTypeList()).list;
			//    this.payType = list.filter(item => item.type==0);
			//    this.incomeType = list.filter(item => item.type==1);
			// },
			// 设置自定义类型
			 setType(type) {
				this.$refs.typePopup.open()
				this.isUpdate = false
				this.customType = type
				this.customTitle = ''
			 },
			 // 校验自定义类型
			 onCustomTypeInput(e) {
				 if(this.customType==0) {
					this.cusFlag = this.typeStore.payType.filter(item => item.title==e.detail.value).length>0
				 }
				 if(this.customType==1) {
				 	this.cusFlag = this.typeStore.inType.filter(item => item.title==e.detail.value).length>0
				 }
			 },
			 // 操作数据库
			 async handleSetType() {
				 if(this.isUpdate) {
					await updateCustomType({id:this.customId,title:this.customTitle})
				 } else {
					await addCustomType({title:this.customTitle,type:this.customType})
				 }
				 this.$refs.typePopup.close()
				 await this.typeStore.getData()
			 },
			 // 修改自定义类型
			 handleEditType() {
				 this.isUpdate = true
				 this.$refs.typeOperation.close()
				 this.$refs.typePopup.open()
			 },
			 // 删除自定义类型
			 async handleDeleteType() {
				 const self = this
				 uni.showModal({
				 	title:'提示',
				 	content:'删除后,该分类下账单记录也会删除,是否继续?',
				 	success:async function (res) {
				 			if (res.confirm) {
				 				await deleteCustomType(self.customId)
				 				self.$refs.typeOperation.close()
				 				await self.typeStore.getData()
				 			}
				 		}
				 })
			 },
		 // 长按事件
			longpress(item){
				if(item.is_custom==0) {
					return
				}
			   this.customTitle = item.title
			   this.customId = item.id
				this.$refs.typeOperation.open()
			 },
				
		},
	}
</script>

<style lang="scss">
	.active {
		color: white;
		background-color: #000;
	}
	.tabTitle {
		background-color: gold;
		text {
			flex-basis: 50%;
			text-align: center;
			padding: 12rpx 0;
			border: 1px solid #000;
		}
	}
	.acc-type {
		font-size: 30px;
		color: #333;
		background-color: rgba(238, 238, 238,.4);
		border-radius: 50%;
		padding: 12px;
	}
	.plus {
		border: 1px dotted gold;
		color: gold;
		background-color: transparent;
	}
	.active-type {
		box-sizing: border-box;
		background-color: gold;
		border: 2px solid #666;
	}
</style>
